<script setup lang="ts">
  import { computed } from "vue";

  const props = defineProps({
    offsetTop: {
      type: Number,
      default: 0,
    },
    offsetBottom: {
      type: Number,
      default: 0,
    },
    offsetRight: {
      type: Number,
      default: 0,
    },
  });

  const styles = computed(() => {
    return {
      top: `${props.offsetTop}px`,
      right: `${props.offsetRight}px`,
    };
  });
</script>

<template>
  <div class="umrp-affix" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-affix {
    position: fixed;
  }
</style>
